iT邦幫忙

2021 iThome 鐵人賽

DAY 15
1
Modern Web

白話JavaScript系列 第 15

Day15-ProtoType

  • 分享至 

  • xImage
  •  

前言

在經過前面幾天的章節之後,我們對於如何使用JavaScript與相關的知識有一些概念了。

今天我們要來更深入了解JavaScript的運作原理Prototype(原型)與prototype chain(原型鏈)

  • ProtoType
  • proto

Constructor function

JavaScript有別於其他程式語言 如:Java、C#等等,本身並沒有類別的概念。

在JavaScript中我們會利用建構函數去建立設計模型

function User(name, age, sex) {
  this.name = name,
  this.age = age,
  this.sex = sex,
  this.sayHi = function() {
    console.log(this.name + 'Hi');
  }
}

並且我們會使用new 這個關鍵字,建立我們的實體。

const Ian = new User('Ian', 22, 'male')

打印出來看看

console.log(Ian);

https://ithelp.ithome.com.tw/upload/images/20210821/20130419qIYjaaze7A.png

可以看到被建立為一個實體物件了!!!

測試一下,是否正常

Ian.sayHi()
Jessica.sayHi()

ProtoType

由建構函數new 出一個實體代表我們會建立一個專屬的記憶體位置。

但是若有100個實體,那豈不是創立了100個sayHi method造成效能浪費嗎???

先來測試是否指向不同的位置

console.log(Ian.sayHi === Jessica.sayHi) //false

Ok,結果是沒錯的

那我們要怎麼改進呢???

先把Ian的實體打印出來看看

console.log(Ian)

https://ithelp.ithome.com.tw/upload/images/20210821/20130419guqHwySFYR.png

可以看到Ian其實是去取用User的prototype

那我們換個想法,把User的參考prototype增加一個不就可以共用了嗎!?

User.prototype.sayHi = function() {
  console.log(this.name + ' Hi');
}

更改過後的程式碼

function User(name, age, sex) {
  this.name = name,
  this.age = age,
  this.sex = sex
}

User.prototype.sayHi = function() {
  console.log(this.name + ' Hi');
}
const Ian = new User('Ian', 22, 'male')
const Jessica = new User('Jessica', 22, 'female')

Ian.sayHi() //Ian Hi

果然跟我們所想的一樣,可以這樣擴充我們的屬性。

打印看看Ian跟Jessica的sayHi function是否相同記憶體

console.log(Ian.sayHi === Jessica.sayHi); //true

太棒了我們成功了解prototype了!!!

proto

那你說JavaScript是怎麼幫我們指向過去到所參考的ProtoType???

答案就是__proto__

https://ithelp.ithome.com.tw/upload/images/20210821/20130419wRNPVhTdPe.png

把Ian.__proto__打印出來看看是否是利用__proto__連結的

console.log(Ian.__proto__); 

https://ithelp.ithome.com.tw/upload/images/20210821/20130419koBjxHSBKu.png

沒錯拉!!! Ian.__proto__確實指向到了User的ProtoType

最後我們用Array來做最後測試

建立一個Array實體

const arrayTest = new Array(1,2,3)
console.log(arrayTest.filter((item) => item > 1))

我們有辦法不宣告任何方法即可使用filter等等method,即是透過prototype。

https://ithelp.ithome.com.tw/upload/images/20210821/20130419FI1mRUpBjw.png


上一篇
Day14-This
下一篇
Day16-Class
系列文
白話JavaScript28
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言